<template>
	<uni-popup ref="pop_economyPay">
		<view class="economyPay">
			<view class="black_1">
				质押{{items.day}}天
				<!-- <image class="img2" src="/static/economy/pay_bg2.png"></image>
				<image @click="close()" class="img" src="/static/my/close.png"></image> -->
			</view>


			<view class="item">
				<template v-for="(item,index1) in items.nums">
					<view @click="select(index1)" class="text1" :style="index1 == index?'background: #FE903D;color:#fff':''">
						{{item.num}}
					</view>
				</template>
			</view>
			<!-- <uni-easyinput
			class="inputs inputs2"
			type="password" 
			v-model="password" 
			:inputBorder="false" 
			:styles="{backgroundColor: 'transparent'}"
			placeholder="请输入支付密码"
			placeholder-style="color:#FE903D;font-size:16px"
			></uni-easyinput> -->

			<!-- <view class="black_6">
				您选择质押{{num}}个ZY
			</view>
			<view class="black_4">
				{{items.day}}天后可获得绿色积分：<text class="text1">{{ Number(ratio).toFixed(2) }}</text>
			</view> -->
			<view class="black_4 black_6">
				<!-- {{items.day}}天后可获得绿色积分：<text class="text1">{{ Number(ratio).toFixed(2) }}</text> -->
				 <p>{{num}}个ZY*单价{{today_unit_price}}元=金额{{Number(num * today_unit_price).toFixed(2)}}元</p>
				<p>{{Number(num * today_unit_price).toFixed(2)}}元*收益{{items.ratio}}%=<text class="text1">{{Number(ratio).toFixed(2)}}</text>个绿色积分</p>
		<!-- 
			<p>ZY数量*当天价格=总的金额</p>
			<p>总的金额*对应收益比列=<text class="text1">{{ratio}}</text> 绿色积分</p>
			 -->
			</view>
			<!-- <view class="black_8">
				公式：
				<p>ZY数量*当天价格=总的金额</p>
				<p>总的金额*对应收益比列=多少绿色积分</p>
			</view> -->
			<view class="black_5" @click="spay()">
				<view class="text1">确认质押</view>
			</view>

			<view class="black_7" @click="close()">
				悄悄离开
			</view>
		</view>
	</uni-popup>

</template>

<script>
	export default {
		name: "economyPay3",
		props: {
			success: {
				type: Function,
			}
		},
		data() {
			return {
				index: 0,
				ids: 0,
				num: 0,
				ratio:0,
				today_unit_price:0,
				items: {
					"id": 0,
					"name": "",
					"avatar": "",
					"desc": "",
					"nums": [{
							"num": "",
							"green_num": ""
						},
						{
							"num": "50",
							"green_num": ""
						},
						{
							"num": "",
							"green_num": ""
						}
					],
					"day": 0,
					"ratio": 0
				}
			};
		},
		methods: {
			open(item,today_unit_price) {
				this.items = item
				this.today_unit_price =Number(today_unit_price) 
				this.select(0)
				this.$refs.pop_economyPay.open()
			},
			close() {
				this.$refs.pop_economyPay.close()
			},
			select(index) {
				this.index = index
				this.ratio = (Number( this.items.nums[index].num) * Number(this.today_unit_price)) * ((Number(this.items.ratio)) / 100)
				this.num = this.items.nums[index].num
			},
			spay() {
				var url = 'pledgeshop/buy'
				console.log(111111111,this.items.id)
				this.api.http.requests(url, {
					id: this.items.id,
					num: this.num
				}, res => {
					uni.showToast({
						title: res.msg,
						icon: 'none'
					})
					this.close()
				}, "POST")
				this.close()
			}
		}
	}
</script>

<style scoped lang="less">
	.economyPay {
		background: #fff;
		border-radius: 16rpx;
		padding: 20px;
		width: 600upx;
		// width: 100%;
		height: auto;
	}

	.black_1 {
		text-align: center;

		font-size: 20px;
		font-weight: 800;
		color: #333333;
		width: 100%;

		.img2 {
			width: 189px;
			height: 120px;
			margin: 25px 10px 0px 10px;
		}

		.img {
			width: 25px;
			height: 25px;
			position: absolute;
			right: 10px;
			top: 10px;
		}
	}

	.black_2 {
		margin-top: 20px;
		font-size: 18px;
		font-weight: 800;
		color: #333333;
	}

	.item {
		margin-top: 40px;
		display: flex;
		justify-content: center;

		.text1 {
			text-align: center;
			width: 90px;
			height: 34px;
			margin: 10px;
			line-height: 34px;
			background: #EFEFEF;
			border-radius: 21px 21px 21px 21px;
		}
	}

	.black_6 {
		margin-top: 20px;
		text-align: center;
		font-size: 14px;
		color: #191A1D;
	}

	.inputs {
		margin-top: 10px;
		padding: 5px 0px;
		border: 1px solid #FFE6D5;
		border-radius: 5px;
		font-size: 30rpx;
		font-weight: 400;
		background-color: #FFE6D5;
		// text-align: end;
	}

	.inputs2 {
		margin: 40px auto 10px auto;
		width: 250px;
		border-radius: 20px;
		text-align: center;
	}

	.black_4 {
		text-align: center;
		font-size: 14px;

		color: #191A1D;

		.text1 {
			margin-left: 5px;
			color: #FE903D;
		}
	}

	.black_5 {
		margin: 10px auto 10px auto;
		// width: 146px;
		height: 45px;
		line-height: 45px;
		color: white;
		text-align: center;
		background: #FE903D;
		border-radius: 30px;
	}

	.black_7 {
		margin: 30px 10px 10px 10px;
		text-align: center;
		font-size: 16px;
		font-weight: 400;
		color: #BFBFBF;
	}
	.black_8{
		margin-top: 5px;
		text-align: center;
		font-size: 12px;
		font-weight: 400;
		color: red;
	}
</style>